<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>添加/修改地址</title>
	<link rel="stylesheet" href="./css/common.css" />
	<link rel="stylesheet" href="./css/addressAdd.css" />
</head>

<body>
	<div class="container">
		<div class="header">
			<div class="lt" onclick="javascript:history.go(-1)">&lt;</div>
			<div class="ct">添加/修改地址</div>
			<div class="rt"></div>
		</div>
		<div class="add-address">
			<div class="add-form">
				<div class="form-item">
					<input class="input" id="name" placeholder="姓名" auto-focus />
				</div>
				<div class="form-item">
					<input class="input" id="mobile" placeholder="手机号码" />
				</div>
				<div class="form-item">
					<input class="input" id="dq" placeholder="省份、城市、区县(用弹框做，注意查看接口)" />
				</div>
				<div class="form-item">
					<input class="input" id="address" placeholder="详细地址, 如街道、楼盘号等" />
				</div>
				<div class="form-default">
					<span class="default-input selected">设为默认地址</span>
				</div>
			</div>
			<div class="btns">
				<button class="cannel" bindtap="cancelAddress">取消</button>
				<button class="save" bindtap="saveAddress">保存</button>
			</div>
		</div>
	</div>

	<!-- 弹出选择框 -->
	<div class="long">
		<div class="long-h">
			<div class="hader">
				<span>请选择所在地区 </span>
				<i></i>
			</div>
			<div class="diqu">
				<div class="diqu_list">
					<ul>
						<li class="red" index="0" style="display: block;">请选择</li>
						<li index="1">请选择</li>
						<li>请选择</li>
					</ul>
				</div>
				<div class="diqu_con">
					<div class="item" style="display: block;">

						<ul class="sheng" id="sheng">


						</ul>
					</div>
					<div class="item">

						<ul class="shi">
							<!-- <li>合肥市</li> -->
						</ul>
					</div>
					<div class="item">

						<ul class="xian">
							<!-- <li>蜀山区</li> -->
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		// 获取元素
		var diqu_list = document.querySelector('.diqu_list');
		var lis = diqu_list.querySelectorAll('li');
		var items = document.querySelectorAll('.item');

		// for循环绑定点击事件
		for (var i = 0; i < lis.length; i++) {
			// 开始给5个小li 设置索引号 
			lis[i].setAttribute('index', i);

			lis[i].onclick = function () {
				// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
				// 干掉所有人 其余的li清除 class 这个类
				for (var i = 0; i < lis.length; i++) {
					lis[i].className = '';
				}

				// 留下我自己 
				this.className = 'red';
				// // 2. 下面的显示内容模块
				// this: 指的是绑定的对象中被触发（当前点击）的对象
				var index = this.getAttribute('index');

				// // 干掉所有人 让其余的item 这些div 隐藏
				for (var i = 0; i < items.length; i++) {
					items[i].style.display = 'none';
				}
				// // 留下我自己 让对应的item 显示出来¡
				items[index].style.display = 'block';
			}
		}
	</script>
	<script type="text/html" id="tale-sheng">
		{{each data}}
	<li bata-id="{{$value.id}}" >{{$value.name}}</li>
		{{/each}}
	</script>
	<script type="text/html" id="tale-shi">
		{{each data}}
	<li bata-id="{{$value.id}}" >{{$value.name}}</li>
		{{/each}}
	</script>
	<script type="text/html" id="tale-xian">
		{{each data}}
	<li bata-id="{{$value.id}}">{{$value.name}}</li>
		{{/each}}
	</script>



	<script src="./js/jquery.js"></script>
	<script src="./js/template-web.js"></script>
	<script src="./js/baseAPI.js"></script>
	<script src="./js/husong/zengshan.js"></script>
</body>

</html>